import { ImageResponse } from 'next/og';
import { ogMark } from '@/components/layout/logo';
import { publicProfile } from '@/lib/account/queries';
import { summarizePortfolio } from '@/lib/account/portfolio';
import { fmtMoney } from '@/lib/format';

export const runtime = 'nodejs';
export const alt = 'RareIndex collector profile';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: Promise<{ handle: string }> }) {
  const { handle } = await params;
  const p = await publicProfile(handle);
  const name = p?.user.name ?? `@${handle}`;
  const total = p ? summarizePortfolio(p.items) : null;
  const top = total?.allocationByFamily.slice(0, 3).map((b) => b.label).join(' · ') ?? '';
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#fafaf9', color: '#0b0b0c', fontFamily: 'sans-serif' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 28, fontWeight: 600 }}>
          {ogMark(40)}
          RareIndex <span style={{ color: '#55555b', fontWeight: 400 }}>· collector profile</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: -2 }}>{name}</div>
          <div style={{ fontSize: 30, color: '#55555b', marginTop: 8 }}>@{handle}{top ? ` · ${top}` : ''}</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '2px solid #e4e4e2', paddingTop: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 20, color: '#8a8a91', textTransform: 'uppercase', letterSpacing: 2 }}>Public collection value</div>
            <div style={{ fontSize: 56, fontWeight: 700 }}>{total?.valuedCount ? fmtMoney(total.valueUsd) : '—'}</div>
          </div>
          <div style={{ fontSize: 24, color: '#55555b' }}>{total ? `${total.itemCount} items · ${p?.collections.length ?? 0} collections` : ''}</div>
        </div>
      </div>
    ),
    { ...size },
  );
}